<template>
	<view class="wrap">
		<view class="topSearch u-flex">
			<view class="dateTime">
				<text>训练人员：</text>
				<input v-model="name" />
				<text class="u-m-l-10">训练日期：</text>
				<input v-model="myDate" disabled="true" @click="timerShow = true" />
				<u-button style="margin-left:10rpx;" type="primary" size="mini">查询</u-button>
			</view>
		</view>
		<view class="u-content">
			
			<view class="echatsBox" id="lineView"></view>
			<view class="echatsBox" id="cireView"></view>
			
		</view>
		<u-picker mode="time" v-model="timerShow" :params="params" @confirm="timerConfirm"></u-picker>
	</view>
</template>

<script>
import * as echarts from 'echarts';
export default {
	data() {
		return {
			myDate: '',
			name: '',
			timerShow: false,
			params: {
				year: true,
				month: true,
				day: true
			}
		};
	},
	onLoad() {
		const self = this;
		// let newPromise = new Promise(resolve => {
		// 	resolve();
		// });
		// newPromise.then(() => {
			
		// });
	},
	mounted() {
		this.$nextTick(function(){
			this.lineChats();
			this.cirlChats();
		})
	},
	methods: {
		addPage() {},
		timerConfirm() {},
		lineChats() {
			const myChart = echarts.init(document.getElementById('lineView'));
			const option = {
				grid: { left: '15%', top: '12%' },
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value',
					name: '成绩'
				},
				series: [
					{
						data: [95, 90, 93, 98, 96, 97, 98],
						type: 'line',
						smooth: true
					}
				]
			};
			myChart.setOption(option);
		},
		cirlChats() {
			const myChart = echarts.init(document.getElementById('cireView'));
			const option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					show: false
				},
				series: [
					{
						name: '训练状态',
						type: 'pie',
						radius: '50%',
						avoidLabelOverlap: false,
						label: {
							formatter: '{b}: {@2012}'
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: true
						},
						data: [{ value: 1048, name: '力量' }, { value: 735, name: '速度' }, { value: 580, name: '体能' }]
					}
				]
			};
			myChart.setOption(option);
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	 height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.topSearch {
	padding: 20rpx;
	position: fixed;
	background: #fff;
	z-index: 100;
	top: 90rpx;
	left: 0;
	width: 100%;
	.dateTime {
		line-height: 56rpx;
		font-size: 22rpx;
		text {
			float: left;
		}
		input {
			font-size: 22rpx;
			float: left;
			width: 180rpx;
			height: 56rpx;
			line-height: 56rpx;
			padding: 0 10rpx;
			border: 1px solid #d9d9d9;
			border-radius: 0.3em;
		}
	}
}
.u-content {
	height: 100%;
	padding-top: 110rpx;
		.echatsBox {
			height: 50%;
		}
	
}
</style>
